.nav-list{
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-top: 10px;
}
.nav-list li{
    font-size: 14px;
    padding-bottom: 5px;
}

/* .nav-list li:hover{
    color: red;
    border-bottom: 2px solid red;
} */

/* 点击事件后的样式 */
.nav-list .active{
    color: red;
    bottom: -10px;
}
/* border-bottom: 2px solid red; */


/* 动画部分 */
.hengxian{
    width: 100%;
    height: 2px;
    margin: 5px auto;
    background-color: red;
}

/* 进入的第一帧和离开的最后一帧 */
.fade-enter,
.fade-leave-to{
    width: 0%;
    height: 2px;
    margin: 0px auto;
    background-color: red;
}

/* 动画执行的过程 */
.fade-enter-active,
.fade-leave-active{
    transition: all .2s linear;
}

/* 动画的最后一帧和离开的第一帧 */
.fade-enter-to,
.fade-leave{
    width: 100%;
    height: 2px;
    margin: 0px auto;
    background-color: red;

}
